<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>价格</th>
        <th>颜色</th>
    </tr>
</table>

<script>
    let p1 = {}; //实例化一个空对象

    //JS中允许动态添加属性和方法(Java不支持)
    p1.name = "张三";
    p1.age = 18;
    p1.run = function () {
        console.log(this.name + ":" + this.age);
    }
    p1.run(); //调用方法

    //实例化一个自带属性和方法的对象
    let p2 = {
        name: "李四",
        age: 30,
        run: function () {
            console.log(this.name + ":" + this.age);
        }
    }
    p2.run(); //调用方法

    //用对象封装一个商品的信息
    let product = {title: "斯伯丁篮球", price: 108, color: "红色"};

    //用数组装多个对象，这样数组里面就有多个商品的信息了
    let arr = [{title: "斯伯丁篮球", price: 108, color: "红色"},
        {title: "威尔逊篮球", price: 158, color: "花色"},
        {title: "李宁篮球", price: 98, color: "蓝色"}];

    let t = document.querySelector("table"); //得到table

    //for循环遍历数组
    for (let p of arr) {
        //创建tr 和3个td
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let colorTd = document.createElement("td");

        //把当前遍历的商品中的数据填到td中
        titleTd.innerText = p.title;
        priceTd.innerText = p.price;
        colorTd.innerText = p.color;

        tr.append(titleTd, priceTd, colorTd); //把3个td装进tr
        t.append(tr); //把tr装进table
    }
</script>

</body>
</html>